<template>
	<view class="pageBg">
		<Skeleton v-if="skeletonLoading" type="jobfair"></Skeleton>
		<Head ref="head" title="招聘会" type="detail" :isBack="false"></Head>
		<view class="banner">
			<image src="@/jobfairs/static/img/banner.png"></image>
		</view>
		<view class="wrapper">
			<view class="tabBtns">
				<view :class="currentTabIndex == 0 ? 'btn ac' : 'btn'" @click="handleTabClick(0)">网络招聘会</view>
				<view :class="currentTabIndex == 1 ? 'btn ac' : 'btn'" @click="handleTabClick(1)">现场招聘会</view>
			</view>
			<view class="jobFairList">
				<view class="item" v-for="(item,index) in list" :key="index" @click="handleJumpShow(item)">
					<view class="info">
						<view class="img">
							<image v-if="currentTabIndex == 0" :src="item.thumb_src" mode="widthFix"></image>
							<image v-if="currentTabIndex == 1" :src="item.thumb" mode="widthFix"></image>
							<text v-if="currentTabIndex == 0">
								<text class="card green" v-if="item.score === 2">进行中</text>
								<text class="card orange" v-else-if="item.score === 1">未开始</text>
								<text class="card grey" v-else>已结束</text>
							</text>
							<text v-if="currentTabIndex == 1">
								<text :class="['card','holddate'+item.holddate]">{{item.holddate_text}}</text>
							</text>
							<!-- <view class="card color2">现场</view> -->
						</view>
						<view class="text">
							<view class="t1 substring2">
								<text class="name">{{item.title}}</text>
							</view>
							<view :class="['color substring','tipsText' + item.friendly_tips]"
								v-if="currentTabIndex == 1 && item.friendly_tips"> {{item | tipsText}} </view>
						</view>
					</view>
					<view class="quantity u-border-top">
						<view class="num">
							<view class="t1" v-if="currentTabIndex == 0">{{item.total_company}}</view>
							<view class="t1" v-if="currentTabIndex == 1">{{item.company_num}}</view>
							<view class="t2">参会企业</view>
						</view>
						<view class="num">
							<view class="t1" v-if="currentTabIndex == 0">{{item.total_job}}</view>
							<view class="t1" v-if="currentTabIndex == 1">{{item.jobs_num}}</view>
							<view class="t2">招聘职位</view>
						</view>
						<view class="num">
							<view class="t1">{{item.click}}</view>
							<view class="t2">浏览次数</view>
						</view>
						<view class="btn" @click="handleJumpShow(item)">查看详情</view>
					</view>
				</view>
				<u-loadmore v-if="list.length >= params.pagesize" class="u-loadmore"
					:status="finished_status"></u-loadmore>
				<Empty v-if="show_empty"></Empty>
			</view>
		</view>
	</view>
</template>

<script>
	import http from '@/utils/http'
	import api from '@/api'
	import {
		onShareAppMessage,
		onShareTimeline
	} from '@/utils/share.js'
	import Skeleton from '@/components/Skeleton.vue'
	import Head from '@/components/Head.vue'
	export default {
		data() {
			return {
				skeletonLoading: true,
				list: [],
				params: {
					page: 1,
					pagesize: 10
				},
				currentTabIndex: 0,
				finished_status: 'loadmore',
				show_empty: false
			};
		},
		components: {
			Skeleton,
			Head
		},
		filters: {
			tipsText(value) {
				if (!value) return ''
				var text = ''
				switch (value.friendly_tips) {
					case 0:
						text = "未开始报名，请耐心等待"
						break;
					case 1:
						text = "火热报名中，请从速报名"
						break;
					case 2:
						text = "已停止报名，请及时关注"
						break;
					case 3:
						text = "已预定展位号" + value.position + "，请按时参会"
						break;
					case 4:
						text = "已预定展位号" + value.position + "，请等待审核"
						break;
					default:
						text = "展位号" + value.position + "审核未通过，请联系客服"
						break;
				}
				return text
			}
		},
		onShow() {
			this.params.page = 1
			if (this.currentTabIndex) {
				this.getJobfairList(true)
			} else {
				this.getJobfairolList(true)
			}
		},
		mounted() {
			uni.$on('onPageScroll', (data) => {
				console.log('招聘会页面滚动')
			})
		},
		onShareAppMessage() {
			return onShareAppMessage({
				url: '/jobfairs/JobfairsList',
				alias: this.currentTabIndex ? "online_jobfairlist" : 'jobfairlist'
			})
		},
		onShareTimeline() {
			return onShareTimeline({
				url: '/jobfairs/JobfairsList',
				alias: this.currentTabIndex ? "online_jobfairlist" : 'jobfairlist'
			})
		},
		onReachBottom() {
			this.finished_status = 'loading';
			this.params.page++
			if (this.currentTabIndex) {
				this.getJobfairList(false)
			} else {
				this.getJobfairolList(false)
			}
		},
		methods: {
			// 招聘会列表
			getJobfairList(init) {
				this.show_empty = false
				http.get(api.jobfair, this.params).then(res => {
					if (res.data.code == 200) {
						if (init === true) {
							this.list = [...res.data.data.items]
						} else {
							this.list = this.list.concat(res.data.data.items)
						}
						this.skeletonLoading = false
						this.finished_status = 'loading';
						// 数据全部加载完成
						if (res.data.data.items.length <= this.params.pagesize) {
							this.finished_status = 'nomore'
							if (init === false) {
								this.finished_status = 'nomore'
							} else if (res.data.data.items.length === 0) {
								this.show_empty = true
								this.finished_status = 'nomore'
							}
						}
					}
				})
			},
			// 网络招聘会列表
			getJobfairolList(init) {
				this.show_empty = false
				http.get(api.jobfairol, this.params).then(res => {
					if (res.data.code == 200) {
						if (init === true) {
							this.list = [...res.data.data.items]
						} else {
							this.list = this.list.concat(res.data.data.items)
						}
						this.skeletonLoading = false
						this.finished_status = 'loadmore';
						// 数据全部加载完成 
						if (res.data.data.items.length <= this.params.pagesize) {
							this.finished_status = 'nomore'
							if (init === false) {
								this.finished_status = 'nomore'
							} else if (res.data.data.items.length === 0) {
								this.show_empty = true
								this.finished_status = 'nomore'
							}
						}
					}
				})
			},
			// tab切换
			handleTabClick(index) {
				this.list = []
				this.currentTabIndex = index
				this.params.page = 1
				if (this.currentTabIndex) {
					this.getJobfairList(true)
				} else {
					this.getJobfairolList(true)
				}
			},
			// 进入详情
			handleJumpShow(item) {
				// 0网络招聘会 1现场招聘会
				if (this.currentTabIndex) {
					uni.navigateTo({
						url: '/jobfairs/JobfairShow?id=' + item.id
					})
				} else {
					uni.navigateTo({
						url: '/jobfairs/JobfairolShow?id=' + item.id
					})
				}
			}

		},
	}
</script>

<style lang="scss" scoped>
	.wrapper {
		padding: 0 30rpx;
	}

	.banner {
		height: 300rpx;

		image {
			width: 100%;
			height: 100%;
			display: block;
		}
	}

	.tabBtns {
		display: flex;
		align-items: center;
		justify-content: center;
		background: #fff;
		height: 82rpx;
		border-radius: 14rpx;
		margin-top: -40rpx;
		margin-bottom: 20rpx;

		.btn {
			color: #2A2A2A;
			font-size: 32rpx;
			font-weight: 500;
			padding: 0 60rpx;

			&.ac {
				color: #1360FF;
				font-size: 34rpx;
				font-weight: 500;
				position: relative;

				&::before {
					content: '';
					position: absolute;
					bottom: -18rpx;
					left: 50%;
					width: 32rpx;
					background: #1360FF;
					height: 6rpx;
					transform: translateX(-50%);
					border-radius: 4rpx 4rpx 0px 0px;
				}
			}
		}
	}

	.jobFairList {
		.item {
			background: #fff;
			margin-bottom: 18rpx;
			border-radius: 14rpx;

			.info {
				display: flex;
				padding: 24rpx 34rpx 24rpx 24rpx;

				.img {
					flex-shrink: 0;
					width: 185rpx;
					height: 130rpx;
					margin-right: 28rpx;
					border-radius: 10rpx;
					position: relative;
					display: flex;
					align-items: center;
					justify-content: center;
					overflow: hidden;

					image {
						width:100%;
						// height:100%;
						display: block;
						border-radius: 10rpx;
					}

					.card {
						position: absolute;
						left: 0;
						top: 0;
						color: #fff;
						font-size: 20rpx;
						border-radius: 10rpx 0px 20rpx 0px;
						padding: 6rpx 14rpx;

						&.color1 {
							background: linear-gradient(45deg, #16C272, #5AD099);
						}

						&.color2 {
							background: linear-gradient(45deg, #FC6502, #FF9149);
						}

						&.green,
						&.holddate1 {
							background: linear-gradient(45deg, #16C272, #5DD19B);
						}

						&.orange,
						&.holddate0 {
							background: linear-gradient(45deg, #FC6502, #FF9149);
						}

						&.grey,
						&.holddate2 {
							background: linear-gradient(45deg, #ABABAB, #C4C4C4);
						}

					}
				}

				.text {
					flex-shrink: 0;
					width: calc(100% - 185rpx - 28rpx);

					.t1 {
						padding: 4rpx 0;
						max-height: 100rpx;
						min-height: 100rpx;
					}

					.state {
						font-size: 22rpx;
						padding: 4rpx 10rpx;
						border-radius: 4rpx;
						margin-right: 10rpx;

						&.blue,
						&.holddate1 {
							color: #1360FF;
							border: 1rpx solid #266DFF;
						}

						&.orange,
						&.holddate0 {
							color: #FC6502;
							border: 1rpx solid #FC6502;
						}

						&.grey,
						&.holddate2 {
							color: #A2A2A2;
							border: 1rpx solid #A2A2A2;
						}
					}

					.name {
						line-height: 46rpx;
						color: #2A2A2A;
						font-size: 32rpx;
						font-weight: 500;
					}

					.color {
						font-size: 24rpx;

						&.tipsText0,
						&.tipsText5 {
							color: #FC6502;
						}

						&.tipsText3,
						&.tipsText4 {
							color: #16C272;
						}

						&.tipsText1 {
							color: #1360FF;
						}

						&.tipsText2 {
							color: #B6B6B6;
						}
					}
				}
			}

			.quantity {
				display: flex;
				align-items: center;
				padding: 28rpx 24rpx;

				&::after {
					border-color: #F2F2F2;
				}

				.num {
					/* #ifdef MP-TOUTIAO || MP-WEIXIN */
					margin-right: 68rpx;
					/* #endif */
					/* #ifdef MP-ALIPAY */
					margin-right: 58rpx;

					/* #endif */
					.t1 {
						color: #2A2A2A;
						font-size: 32rpx;
						font-weight: bold;
					}

					.t2 {
						color: #999999;
						font-size: 24rpx;
					}
				}

				.btn {
					width: 162rpx;
					height: 56rpx;
					text-align: center;
					line-height: 56rpx;
					color: #FFFFFF;
					font-size: 26rpx;
					background: linear-gradient(45deg, #1360FF, #4381FF);
					border-radius: 10rpx;
				}
			}
		}
	}
</style>